@use "theme" as *;
@use "vars" as *;
@use "mixins";

// Main Homepage
//------------------------------------------------------------------------------
#main-search-page {
  background: $main-homepage-background;
  padding: 85px 20px 3px 20px;
  min-height: calc(100vh - 88px);

  @include mixins.tablet{
    padding: 85px 0px 3px 0px;
    min-height: calc(100vh - 88px);
  }

  @include mixins.desktop{
    padding: 85px 0px 3px 0px;
    min-height: calc(100vh - 88px);
  }

  .mid-center {
    max-width: 640px;
    margin: 0 auto;
  }

  .main-item {

    @include mixins.tablet{
      max-width: 600px;
      margin: 30px auto 0 auto;
    }

    @include mixins.desktop{
      max-width: 600px;
      margin: 30px auto 0 auto;
    }

    .branding {
      display: flex;
      justify-content: center;
      align-content: center;
      margin-bottom: 20px;

      .branding-heading {
        margin: 0;

        .logo {
          height: 26px;
          // filter: invert(100%) brightness(80%);
          padding-top: 9px;

          @include mixins.tablet{
            height: 36px;
          }

          @include mixins.desktop{
            height: 36px;
          }
        }
      }

      .branding-label {
        margin: 0 0 0 15px;
        height: 21px;
        padding: 10px 0 10px 15px;
        border-left: 1px solid $main-homepage-icon-border;
        color: $main-homepage-icon-color;
        font-family: $font-branding;
        font-size: 28px;
        font-weight: 100;
        line-height: 21px;
        text-transform: none;
        vertical-align: top;
        -webkit-font-smoothing: antialiased;

        @include mixins.tablet{
          height: 30px;
          padding: 15px 0 9px 18px;
          font-size: 38px;
          line-height: 26px;
        }

        @include mixins.desktop{
          height: 30px;
          padding: 15px 0 10px 20px;
          font-size: 38px;
          line-height: 26px;
        }

        a:link, a:visited {
          color: $gray-50;
        }
        a:hover {
          color: $accent;
          text-decoration: none;
        }
      }
    }

    .tagline {
      text-align: center;
      color: $main-page-text-color;
      margin: 0 auto;
      margin-bottom: 60px;
      font-size: 14px;
      line-height: 21px;
      // width: 90%;

      @include mixins.tablet {
        font-size: 15px;
    		width: 100%;
        margin-bottom: 10vh;
    	}

      @include mixins.desktop {
        font-size: 15px;
        width: 100%;
        margin-bottom: 10vh;
    	}
    }

    .search-topper {
      display: flex;
    }

    .search-container {
      clear: both;
      width: calc(100vw - 60px);
      padding: 0px 6px 0 0;

      @include mixins.tablet{
    		// width: calc(100vw - 140px);
    	}
    	@include mixins.desktop{
    		width: 586px;
    	}

      .twitter-typeahead {
        background: $search-container-background;
        &:hover,
        &:focus,
        &:active {
          background: $search-container-hover;
        }
      }

      .icon{
        height: 50px;
        width: 50px;
        font-size: 15pt;
        margin-left: -50px;
        opacity: 0.95;
        -webkit-transition: opacity .35s ease;
        -moz-transition: opacity .35s ease;
        -ms-transition: opacity .35s ease;
        -o-transition: opacity .35s ease;
        transition: opacity .35s ease;
      }

      &:hover {
        .icon:hover {
          background: $accent;
        }
      }
    }

    .additional-menus {
      justify-content: center;
      margin-top: 30px;

      @include mixins.desktop{
    		margin-top: 40px;
    	}

      &.homepage{
        display: none;
      }
      // button:first-child {
      //   margin-right: 30px;
      // }
    }

    .featured-cat {
      margin-top: 40px;

      @include mixins.tablet{
    		margin-top: 30px;
        display: flex;
    	}
      @include mixins.desktop{
    		margin-top: 30px;
        display: flex;
    	}

      .cat-container {
        flex: 0 50%;
        // margin-top: -7px;
        margin-bottom: 40px;

        h3 {
          font-weight: normal;
          font-size: 14px;
          color: $main-page-text-color;
          margin: 15px 0;

          @include mixins.tablet{
            font-size: 15px;
          }
          @include mixins.desktop{
            font-size: 15px;
          }
        }
        // li {
        //   display: block;
        // }
        ul {
          padding-left: 0;
          list-style-type: none;
        }

        &.style-button {
          ul {
            // margin-top: -10px;
            margin-bottom: 25px;

            li {
              display: inline-block;

              @include mixins.tablet{
                display: block;
              }
              @include mixins.desktop{
                display: block;
              }
            }
          }
        }

        &.style-docs {
          ul {
            padding-left: 7px;
            a {
              color: $btn-default-text-color;
              -webkit-font-smoothing: antialiased;
            }
            li {
              margin-bottom: 7px;
              position: relative;

              &:last-of-type {
                &:before {
                  display: none;
                }
              }

              .fa {
                color: $main-homepage-icon-color;
                margin-right: 7px;
                font-size: 14px;
                line-height: 18px;
              }
            }
          }
        }
      }
    }
  }

  .main-item--bottom {

    @include mixins.tablet{
      top: 20px;
      max-width: 100%;
      padding-bottom: 20px;
    }
    @include mixins.desktop{
      top: 20px;
      max-width: 100%;
      padding-bottom: 20px;
    }

    .help-text {
      color: $main-page-text-color;
      font-size: 14px;
      line-height: 21px;
      letter-spacing: 0;
      text-align: left;

      a {
        color: $main-page-text-color;
        border-bottom: 1px solid $main-page-text-color;
        padding-bottom: 1px;

        &:hover {
          color: $elem-link-color;
          border-bottom: 1px solid $elem-link-color;
          text-decoration: none;
        }
      }

      @include mixins.tablet{
        line-height: 18px;
        letter-spacing: 0.01em;
        text-align: center;
      }
      @include mixins.desktop{
        line-height: 18px;
        letter-spacing: 0.01em;
        text-align: center;
      }
    }
  }
}


// Categories Homepage
//------------------------------------------------------------------------------
#category-page {
  max-width: 90%;

  .g-main-content {
    max-width: 100%;
    display: flex;
    flex-flow: row wrap;
    border-top: 0;
    justify-content: center;

    .children-view{
      padding-left: 10px;
      &.hide {
        padding-left: 10px;
        max-height: 400px;
        overflow-y: hidden;
      }
    }

    .seeMore-button {
      margin: 10px 0 0 0;
      -webkit-font-smoothing: antialiased;
      font-size: 14px;
      background-color: white;
      border: 1px solid #404040;
      border-radius: 0;
      color: black;
      -webkit-box-shadow: 2.5px 2.5px 0px -1px $gray-25;
      -moz-box-shadow: 2.5px 2.5px 0px -1px $gray-25;
      box-shadow: 2.5px 2.5px 0px -1px $gray-25;
      padding: 5px 12px;
      cursor: pointer;
    }

    .seeMore-button:hover {
      background-color: $gray-60;
    }


    .children-container {
      overflow: visible;
      margin: 0 12px 30px 12px;
      padding: 25px;
      border: 1px solid $gray-60;
      width: 100%;
      -webkit-box-shadow: -4px -4px 0px 0px rgba(239,239,239,1);
      -moz-box-shadow: -4px -4px 0px 0px rgba(239,239,239,1);
      box-shadow: -4px -4px 0px 0px rgba(239,239,239,1);

      @include mixins.tablet {
        width: 40.9%;
      }
      @include mixins.smalldesktop {
        width: 34.9%;
      }
      @include mixins.desktop {
        width: 25.4%;
      }
      @include mixins.largedesktop {
        width: 18.4%;
      }

      h3 {
        font-weight: 300;
        font-size: 24px;
        margin-top: 0;
        margin-left: -5px;
      }

      ol,ul {
        margin: 0;
        padding-left: 0px;
        column-count: 1;
        padding-left: 20px;

        li {
          text-indent: 0;
          font-size: 16px;
          line-height: 1.6;
          padding-right: 0;

          a {
            color: $black;
          }
        }
      }
    }
  }
}

// Playlist Page
//------------------------------------------------------------------------------

.playlist-navigation {
  display: flex;
  justify-content: space-between;
}
